<template>
  <footer id="footer">
    <nut-tabbar v-model:visible="active" @tab-switch="tabSwitch">
      <nut-tabbar-item tab-title="电影" icon="home" num="11" to="/movie"></nut-tabbar-item>
      <nut-tabbar-item tab-title="影院" icon="find" to="/cinema"></nut-tabbar-item>
      <nut-tabbar-item tab-title="新品" icon="cart" num="110" to="/newProducts"></nut-tabbar-item>
      <nut-tabbar-item tab-title="我的" icon="my" to="/mine"></nut-tabbar-item>
    </nut-tabbar>
  </footer>
</template>

<script>
import {ref} from 'vue'

export default {
  name: "TabBar",
  setup() {
    const activeIndex = window.sessionStorage.getItem('activeIndex');
    const active = ref(activeIndex | 0)

    function tabSwitch(item, index) {
      window.sessionStorage.setItem('activeIndex', index);
      console.log(item, index);
    }

    return {
      tabSwitch, active
    }

  },
}
</script>

<style scoped>
#footer {
  width: 100%;
  height: 48px;
  background: white;
  /*border-top: 2px #ebe8e3 solid;*/
  position: fixed;
  left: 0;
  bottom: -1px;
}
</style>